<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SocketIOClient_V1.0</title>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
    <script src="./demo.js"></script>
    <link rel="stylesheet" type="text/css" href="./demo.css" />
    <link href="./favicon.ico" rel="shortcut icon" />
  </head>

  <body>
    <h2>SocketClient_V1.0</h2>
    <div class="dialog">
      <div class="dialogContent">
        <p>对话框的内容</p>
      </div>
      <div
        style="
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div class="dialogBtn">
          <button id="confirm" type="button">确定</button>
        </div>
        <div class="dialogBtn2">
          <button id="cancel" type="button">取消</button>
        </div>
      </div>
    </div>
    <div class="mask"></div>
    <div class="dialog2">
      <div class="dialogContent">
        <p>对话框的内容</p>
      </div>
      <div>
        <label>类型:</label
        ><input type="radio" name="类型"value="1" checked/>长麻<input
          type="radio"
          name="类型"
          value="2"
        />
        红中
      </div>
      <div><label>局数:</label><input type="text" name="局数" id="局数" value=""/></div>
      <br />
      <div><label>人数:</label><input type="text" name="人数" id="人数" value=""/></div>
      <div class="model1">
        <br />
        <label>允许点炮:</label
        ><input type="radio" name="点炮" id="fangpao" checked value="1"/>是<input
          type="radio"
          name="点炮"
          id="fangpao"
          value="0"
        />
        否
      </div>

      <div class="model1">
        <label>起手胡:</label>

        <input type="checkbox" id="板板胡" name="myCheckbox" checked/>
        <label for="板板胡">板板胡 </label>
        <input type="checkbox" id="缺一色" name="myCheckbox" checked />
        <label for="缺一色">缺一色</label>
        <input type="checkbox" id="大四喜"name="myCheckbox" checked />
        <label for="大四喜">大四喜(中途)</label>
        <input type="checkbox" id="六六顺" name="myCheckbox" checked />
        <label for="六六顺">六六顺(中途)</label>
        <input type="checkbox" id="单五一枝花"  name="myCheckbox" checked />
        <label for="单五一枝花">单五一枝花</label>
      </div>

      <div class="model1">
        <br />
        <label>牌型:</label>

        <input type="checkbox" id="7对" name="hu1"checked />
        <label for="hu1">7对 </label>
        <input type="checkbox" id="豪7对" name="hu1" checked />
        <label for="hu2">豪7对</label>
        <input type="checkbox" id="将将胡"name="hu1"  checked />
        <label for="hu3">将将胡</label>
        <input type="checkbox" id="碰碰胡" name="hu1" checked />
        <label for="hu4">碰碰胡</label>
        <input type="checkbox" id="全求人" name="hu1" checked />
        <label for="hu5">全求人</label>
        <input type="checkbox" id="清一色"name="hu1" checked />
        <label for="hu6">清一色</label>
      </div>
      <div class="model2">
        <br />
        <label>设置码数:</label>

        <!-- <input type="checkbox" id="myCheckbox" checked />
        <label for="myCheckbox">有红中1个码</label>
        <label for="myCheckbox">有红中4个码</label> -->
        <input type="radio" name="无码全中"  id="isHunZi" value="1" />无码全中<input
          type="radio"
          name="无码全中"
          id="isHunZi"
          value="2"
          checked
        />不无码全中
        <br />
        <input type="radio" name="红中" id="youHunZi" checked value="1" />有红中2个码<input
          type="radio"
          name="红中"
          id="youHunZi"
          value="2"
        />
        有红中4个码
        <br />
        <input type="radio" name="无红中" id="wuHunZi" value="1" />无红中4个码<input
          type="radio"
          name="无红中"
          id="wuHunZi"
          checked
          value="2"
        />
        无红中6个码
      </div>

      <div
        style="
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div class="dialogBtn">
          <button id="confirm1" type="button">确定</button>
        </div>
        <div class="dialogBtn2">
          <button id="cancel1" type="button">取消</button>
        </div>
      </div>
    </div>

    <div style="margin-top: 10px; border: 1px">
      <label>socketurl:</label
      ><input type="text" id="url" value="http://localhost:4567/chatRoom" />
      <br />
      <label>用户名:</label> <input type="text" id="nickName" value="" />
      <br />
      <label>roomId:</label><input type="text" id="clientId" value="" />
 

      <br />
      <label>房间事件:</label>
      <div style="margin-top: 10px">
        <button id="connect">登录</button>
        <button id="disconnect">退出登录</button>
        <button id="createRoom">创建房间</button>
        <button id="joinGroup">加入房间</button>
        <button id="ready">准备</button>
        <button id="begin">开始</button>
      </div>
    </div>
    <div style="margin-top: 10px">
      <button id="exitGroup">退群</button>
      <button id="messageGroup">发送群信息</button>
    </div>
    <br />
    <div style="border: 1px">
      <label>消息事件:</label>
      <input type="radio" name="算牌" id="算牌" checked value="tingpai"/>算牌
      <span style="margin-left: 15px;">   剩余：</span><button id="mj_count">--</button>
      <br />
      <br />
      <input type="radio" name="action" id="action"  value="peng"/>碰
      <input type="radio" name="action" id="action"  value="gang"/>杠
      <input type="radio" name="action" id="action"  value="bu"/>补
      <input type="radio" name="action" id="action"  value="chi"/>吃
      <input type="radio" name="action" id="action"  value="guo"/>过
      <input type="radio" name="action" id="action"  value="hu"/>胡
      <button id="send3">确认</button>
     </div>
     <br />
     <div style="border: 1px"> 
      <label>选择事件:</label>
      <div id="chidata"></div>
    </div>
    <br />
    <div style="border: 1px"> 
      <label>牌:</label>
      <div id="paidata"></div>
      <br />
      <label>内容:</label><br /><textarea
        id="content"
        maxlength="1000"
        cols="30"
        rows="1"
      ></textarea>
      <br />

      <button id="send2">打牌</button>
    </div>
    <br />
    <div id="console" class="well"></div>
  </body>
  <script src="./demo_sokcet.js"></script>

  <script type="text/javascript">
    $('input[type=radio][id=action]').eq(0).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(1).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(2).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(3).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(4).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(5).attr('disabled','disabled');

    

    hide();
    createhide();
    function serverOutput(message) {
      var element = $('<div>' + message + '</div>');
      $('#console').prepend(element);
    }

    $('#connect').click(function () {
      if (!isConnected) {
        var url = $('#url').val();
        var clientId = $('#clientId').val();
        connect(url, clientId);
      }
    });
    $('#joinInvitedGroup').click(function () {
      var userIds = $('#userIds').val();
      // userIds
      var roomId = $('#clientId').val();

      var ids = userIds.split(',');
      socket.emit('joinInvitedGroup', {
        nickName: nickName,
        userIds: ids,
        roomId: roomId,
        type: 'invited',
        ownerId: nickName,
        roomUserId: nickName,
        socketId: socketId,
        message: content,
      });
    });
    $('#disconnect').click(function () {
      if (isConnected) {
        isConnected = false;
        isJoin = false;
        console.log('手动连接断开');
        socket.close();
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
      }
    });

    $('#createRoom').click(function () {
      if (!isConnected) {
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
        return;
      }
     

      $('.dialogContent p').text('设置规则');
      createshow();
      $('#confirm1').click(function () {
        createhide();
        var roomId = $('#clientId').val();
        var gameNum = $('#局数').val();
        var seat = $('#人数').val();
        var model = $('input[type=radio][name=类型]:checked').val();
        var isHunZi = $('input[type=radio][id=isHunZi]:checked').val();
        var isFangPao = $('input[type=radio][id=fangpao]:checked').val();
        
        var qiShouHu =  {}
        $("input[type='checkbox'][name='myCheckbox']:checked").each(function(){
          if ($(this).attr('checked') =="checked"||$(this).attr('checked') ==true) { 
            qiShouHu={...qiShouHu,[$(this).attr('id')]:1}
          }else{
            qiShouHu={...qiShouHu,[$(this).attr('id')]:0}
          }
        })
        var isDaHu =  {}
        $("input[type='checkbox'][name='hu1']:checked").each(function(){
          console.log($(this).attr('checked'))
          if ($(this).attr('checked') =="checked"||$(this).attr('checked') ==true) { 
            isDaHu={...isDaHu,[$(this).attr('id')]:1}
          }else{
            isDaHu={...isDaHu,[$(this).attr('id')]:0}
          }
        })
       
        
        var wuHunZi = $('input[type=radio][id=wuHunZi]:checked').val();
        var youHunZi = $('input[type=radio][id=youHunZi]:checked').val();

        
        
        var data = {
          nickName: nickName,
          userId: nickName,
          roomId: roomId,
          socketId: socketId,
          ownerId: nickName,
          model: model,
          gameNum: gameNum,
          seat:seat,
          isFangPao:isFangPao,
          qiShouHu: qiShouHu,
          isDaHu: isDaHu,
          isHunZi: isHunZi,
          wuHunZi: wuHunZi,
          youHunZi:youHunZi,
        };
    
      data.roomName = data.userId;
        console.log(data)
        // $('#confirm1').unbind();

        data.isAsk = 1;

        createRoom(data).then((res) => {
          if (res.code == 0) {
            socket.emit('reconnectGroup', data);
          }
        });
      });
      $('#cancel1').click(function () {
        createhide();
        $('#cancel1').unbind();
      });
    });
    $('#joinGroup').click(function () {
      if (!isConnected) {
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
        return;
      }
      var roomId = $('#clientId').val();
      var data = {
        nickName: nickName,
        userId: nickName,
        roomId: roomId,
        socketId: socketId,
        ownerId: nickName,
      };
      // 存在房间
      if (isJoin) {
        serverOutput(
          '<span class="connect-msg">' +
            '已加入房间，无需重复加入' +
            ' </span>',
        );
        return;
      }
      isExist(data).then((res) => {
        if (res.code == 0) {
          userJoinByExistRoom(data).then((res) => {
            // 人在不在房间
            if (res.code == 601) {
              roomUserId = res.data.roomUserId;
              ownerId = res.data.ownerId;
              socket.emit('joinGroup', res.data);
            }
            if (res.code == 602) {
              console.log(res);
              roomUserId = res.data.roomUserId;
              ownerId = res.data.ownerId;
              socket.emit('reconnectGroup', res.data);
            }
          });
        } else{
          serverOutput(
          '<span class="connect-msg">' +
            res.message +
            ' </span>',
        );
        }
      });
    });
  
    $('#exitGroup').click(function () {
      if (!isConnected) {
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
        return;
      }
      var data = {
        nickName: nickName,
        userId: nickName,
        roomId: roomId,
        socketId: socketId,
        ownerId: nickName,
        message: content,
      };
      if (!isJoin) {
        serverOutput('<span class="connect-msg">' + '未进房间啊' + ' </span>');
        return;
      }
      exitRoom(data).then((res) => {
        if (res.code == 0) {
          socket.emit('exitGroup', {
            nickName: nickName,
            userId: nickName,
            roomId: roomId,
            type: '-1',
            socketId: socketId,
            ownerId: nickName,
            message: content,
          });
        }
      });
    });
    $('#ready').click(function () {
      if (!isConnected) {
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
        return;
      }
      var roomId = $('#clientId').val();

      var data = {
        nickName: nickName,
        userId: nickName,
        roomId: roomId,
        socketId: socketId,
        ownerId: nickName,
        message: content,
      };
      if (!isJoin) {
        serverOutput('<span class="connect-msg">' + '未进房间啊' + ' </span>');
        return;
      }
      ready(data).then((res) => {
        if (res.code == 0) {
         

          
        }
      });
    });
    $('#begin').click(function () {
      if (!isConnected) {
        serverOutput(
          '<span class="disconnect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            '已下线! </span>',
        );
        return;
      }
      var roomId = $('#clientId').val();

      var data = {
        nickName: nickName,
        userId: nickName,
        roomId: roomId,
        socketId: socketId,
        ownerId: nickName,
        message: content,
      };
      if (!isJoin) {
        serverOutput('<span class="connect-msg">' + '未进房间啊' + ' </span>');
        return;
      }
      begin(data).then((res) => {
        if (res.code == 0) {
         

          
        }
      });
    });

   
    $('#messageGroup').click(function () {
      socket.emit('messageGroup', {
        nickName: nickName,
        userId: nickName,
        roomId: roomId,
        socketId: socketId,
        message: content,
      });
    });
    $('#send3').click(function () {
      $('input[type=radio][id=action]').eq(0).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(1).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(2).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(3).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(4).attr('disabled','disabled');
    $('input[type=radio][id=action]').eq(5).attr('disabled','disabled');

    var game_ting = $('input[type=radio][id=action]:checked').val();
        if (game_ting=="peng") {
          peng({ userId: nickName, roomId });
      } else if (game_ting=="gang") {
        var content = $('#content').val();
        gang({ userId: nickName, roomId, pai: game_gang[content] });
      } else if (game_ting=="bu") {
        var content = $('#content').val();

        console.log( content,game_gang[content])
         gang({ userId: nickName, roomId, pai: game_gang[content] ,buzhang:true });
      } else if (game_ting=="guo") {
        guo({ userId: nickName, roomId });
      } else if (game_ting=="chi") {
        var content = $('#content').val();

        chi({ userId: nickName, roomId, index: content });
        $('#content').val('')
      } else if (game_ting=="hu") {
        hu({ userId: nickName, roomId });
      }
    })
    $('#send2').click(function () {

      var content = $('#content').val();

      output(
          '<span class="connect-msg"><font color="blue">' +
            getNowTime() +
            '&nbsp;</font>' +
            nickName +
            '打出：' +
            content +
            ' 牌</span>',
        );

        chupai(content).then((data) => {
          
          
        });
    });

    
    
  </script>
</html>
